<div class="container-fluid">
  <div class="card">
    <div class="row">
      <div class="col-md-6">
        <div class="card-header">
          <h4 class="card-title">Pick your Color</h4>
        </div>
        <div class="card-content">
          <button class="btn">Default</button>
          <button class="btn btn-primary">Primary</button>
          <button class="btn btn-info">Info</button>
          <button class="btn btn-success">Success</button>
          <button class="btn btn-warning">Warning</button>
          <button class="btn btn-danger">Danger</button>
          <button class="btn btn-rose">Rose</button>
        </div>
      </div>
      <div class="col-md-6">
        <div class="card-header">
          <h4 class="card-title">Buttons with Label</h4>
        </div>
        <div class="card-content">
          <button class="btn">
            <span class="btn-label">
              <i class="fa fa-angle-left"></i>
            </span>
            <span class="btn-label-title">Left</span>
          </button>
          <button class="btn">
            <span class="btn-label-title">Right</span>
            <span class="btn-label btn-label-right">
              <i class="fa fa-angle-right"></i>
            </span>
          </button>
          <button class="btn btn-info">
            <span class="btn-label">
              <i class="fa fa-exclamation"></i>
            </span>
            <span class="btn-label-title">Info</span>
          </button>
          <button class="btn btn-success">
            <span class="btn-label">
              <i class="fa fa-check"></i>
            </span>
            <span class="btn-label-title">Success</span>
          </button>
          <button class="btn btn-warning">
            <i class="fa fa-warning"></i>
            <span class="btn-label-title">Warning</span>
          </button>
          <button class="btn btn-danger">
            <i class="fa fa-close"></i>
            <span class="btn-label-title">Danger</span>
          </button>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-6">
        <div class="card-header">
          <h4 class="card-title">Pick your Size</h4>
        </div>
        <div class="card-content">
          <button class="btn btn-primary btn-xs">x-Small</button>
          <button class="btn btn-primary btn-sm">Small</button>
          <button class="btn btn-primary">Regular<div class="ripple-container"></div></button>
          <button class="btn btn-primary btn-lg">Large</button>
        </div>
      </div>
      <div class="col-md-6">
        <div class="card-header">
          <h4 class="card-title">Pick your Style</h4>
        </div>
        <div class="card-content">
          <button class="btn btn-primary">Default</button>
          <button class="btn btn-primary btn-round">round</button>
          <button class="btn btn-primary btn-round">
            <i class="fa fa-heart"></i>
            <span class="btn-label-title">with icon</span>
          </button>
          <button class="btn btn-primary btn-round btn-fab btn-fab-mini">
            <i class="fa fa-heart"></i>
          </button>
          <button class="btn btn-primary btn-simple">
            simple
          </button>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-6">
        <div class="card-header">
          <h4 class="card-title">Pagination</h4>
        </div>
        <div class="card-content">
          <ul class="pagination pagination-primary">

            <li>
              <a href="javascript:void(0);">1</a>
            </li>
            <li>
              <a href="javascript:void(0);">...</a>
            </li>
            <li>
              <a href="javascript:void(0);">5</a>
            </li>
            <li>
              <a href="javascript:void(0);">6</a>
            </li>
            <li class="active">
              <a href="javascript:void(0);">7</a>
            </li>
            <li>
              <a href="javascript:void(0);">8</a>
            </li>
            <li>
              <a href="javascript:void(0);">9</a>
            </li>
            <li>
              <a href="javascript:void(0);">...</a>
            </li>
            <li>
              <a href="javascript:void(0);">12</a>
            </li>
          </ul>
          <ul class="pagination pagination-info">
            <li>
              <a href="javascript:void(0);"> prev</a>
            </li>
            <li>
              <a href="javascript:void(0);">1</a>
            </li>
            <li>
              <a href="javascript:void(0);">2</a>
            </li>
            <li class="active">
              <a href="javascript:void(0);">3</a>
            </li>
            <li>
              <a href="javascript:void(0);">4</a>
            </li>
            <li>
              <a href="javascript:void(0);">5</a>
            </li>
            <li>
              <a href="javascript:void(0);">next </a>
            </li>
          </ul>
        </div>
      </div>
      <div class="col-md-6">
        <div class="card-header">
          <h4 class="card-title">Button Group</h4>
        </div>
        <div class="card-content">
          <div class="btn-group">
            <button class="btn btn-info" type="button">Left</button>
            <button class="btn btn-info" type="button">Middle</button>
            <button class="btn btn-info" type="button">Right</button>
          </div>
          <br>
          <br>
          <div class="btn-group">
            <button class="btn btn-round btn-info" type="button">1</button>
            <button class="btn btn-round btn-info" type="button">2</button>
            <button class="btn btn-round btn-info" type="button">3</button>
            <button class="btn btn-round btn-info" type="button">4</button>
          </div>
          <div class="btn-group">
            <button class="btn btn-round btn-info" type="button">5</button>
            <button class="btn btn-round btn-info" type="button">6</button>
            <button class="btn btn-round btn-info" type="button">7</button>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-sm-12">
        <div class="card-header">
          <h4 class="card-title">Social buttons</h4>
        </div>
        <div class="card-content">
          <div class="row">
            <div class="col-md-4 col-sm-4">
              <button class="btn btn-social btn-fill btn-weixin">
                <i class="fa fa-weixin"></i>
                <span class="btn-label-title">Connect with Wechat</span>
              </button>
            </div>
            <div class="col-md-1 col-sm-1">
              <button class="btn btn-just-icon btn-weixin">
                <i class="fa fa-weixin"></i>
              </button>
            </div>
            <div class="col-md-1 col-sm-1">
              <button class="btn btn-just-icon btn-round btn-weixin">
                <i class="fa fa-weixin"></i>
              </button>
            </div>
            <div class="col-md-1 col-sm-1">
              <button class="btn btn-just-icon btn-simple btn-weixin">
                <i class="fa fa-weixin"></i>
              </button>
            </div>
            <div class="col-md-3 col-sm-4">
              <button class="btn btn-simple btn-weixin">
                <i class="fa fa-weixin"></i>
                <span class="btn-label-title">Connect with Wechat</span>
              </button>
            </div>
          </div>
          <div class="row">
            <div class="col-md-4 col-sm-4">
              <button class="btn btn-social btn-fill btn-weibo">
                <i class="fa fa-weibo"></i>
                <span class="btn-label-title">Connect with Weibo</span>
              </button>
            </div>
            <div class="col-md-1 col-sm-1">
              <button class="btn btn-just-icon btn-weibo">
                <i class="fa fa-weibo"> </i>
              </button>
            </div>
            <div class="col-md-1 col-sm-1">
              <button class="btn btn-just-icon btn-round btn-weibo">
                <i class="fa fa-weibo"> </i>
              </button>
            </div>
            <div class="col-md-1 col-sm-1">
              <button class="btn btn-just-icon btn-simple btn-weibo">
                <i class="fa fa-weibo"> </i>
              </button>
            </div>
            <div class="col-md-3 col-sm-4">
              <button class="btn btn-simple btn-weibo">
                <i class="fa fa-weibo"></i>
                <span class="btn-label-title">Connect with Weibo</span>
              </button>
            </div>
          </div>
          <div class="row">
            <div class="col-md-4 col-sm-4">
              <button class="btn btn-social btn-fill btn-qq">
                <i class="fa fa-qq"></i>
                <span>Connect with QQ</span>
              </button>
            </div>
            <div class="col-md-1 col-sm-1">
              <button class="btn btn-just-icon  btn-qq">
                <i class="fa fa-qq"> </i>
              </button>
            </div>
            <div class="col-md-1 col-sm-1">
              <button class="btn btn-just-icon btn-round btn-qq">
                <i class="fa fa-qq"> </i>
              </button>
            </div>
            <div class="col-md-1 col-sm-1">
              <button class="btn btn-just-icon btn-simple btn-qq">
                <i class="fa fa-qq"> </i>
              </button>
            </div>
            <div class="col-md-3 col-sm-4">
              <button class="btn btn-simple btn-qq">
                <i class="fa fa-qq"></i>
                <span class="btn-label-title">Connect with QQ</span>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
